New notification in

Panel Control

It's really easy to show the center. The plugin create a panel on the right side of your website.

Show/Hide panel

Notifications

How to throw a notification with Javascript.

Add a notification

Add an other type

Add a class type

Add a alert

Add a alert w/callback

Ajax Notifications

How to start an ajax check with Javascript. Will take 5 minutes before you see the first notification.

Start ajax

Why not adding a little bit of push in it?

Faye is a publish-subscribe messaging system based on the Bayeux protocol. It provides message servers for Node.js and Ruby, and clients for use on the server and in all major web browsers.

Tips back to top

  • Want to display the date for each notification?

    Include Moment.js and Livestamp.js and ENJOY :)

  • Want mobile support with swipe delete? Try it on a mobile device, swipe left on a notif in the notification panel to delete it.

    Include jquery.mobile.js and ENJOY :) (jquery.mobile.css not required)

  • Add some color to the overlay when the panel is out?

    <style>
	#notificationcenteroverlay {
		background-color: #000;
		opacity: 0.5;
	}
</style>

Documentation back to top

HTML setup

<body>
	<div id="noticationcentermain">
		[...]all your html[...]
	</div>
</body>

Javascript setup

<script>
$('body').notificationcenter({
	center_element: "#notificationcenterpanel",
	body_element: "#noticationcentermain",
	toggle_button: "#notificationcentericon",
	add_panel: true,
	notification_offset: 0,
	display_time: 5000,
	types: [],
	type_max_display: 5,
	truncate_message: 0,
	header_output: '{icon} {type} {count}',
	counter: true,
	default_notifs: [],
	faye: false,
	ajax: false,
	ajax_checkTime: 5000,
	alert_hidden: true,
	alert_hidden_sound: "sounds/Funk",
	store_callback: false
});
</script>

Parameters back to top

Name type default description
center_element string "#notificationcenterpanel" Define the id of the element embedding your dom.
body_element string "#noticationcentermain" Closes the modal when escape key is pressed
toggle_button string "#notificationcentericon" Id of the button to toggle the panel.
add_panel boolean true If you want the panel on the right.
notification_offset int 0 If you want the notifications to start a little lower. Useful to not cover up the notificationcentericon.
display_time int 5000 Display time for each notification in milliseconds. 0 means the notification is sticky and will not be added to the notif pane
array [] Array of objects to define the types of each notifications. 
$('body').notificationcenter({
	types: [{
		type: 'gift', // define the type
		img: 'img/gift.png', // icon path
		imgtype: 'image', // image or class, if class img is the classes
		type_max_display: 5, // if not present the global is used
		display_time: 5000, // if not present the global is used
		alert_hidden: true, // if not present the global is used
		alert_hidden_sound: 'sounds/Funk', // if not present the global is used
		truncate_message: 0, // if not present the global is used
		header_output: '{icon} {type} {count}', // if not present the global is used
		bgcolor: '#EB5D49', // background color for the center header
		color: '#FFFFFF' // text color for the center header
	}, {
		[...]
	}]
});
type_max_display int 5 The amount of notifications per type to display in the panel, the rest will get queued as some are removed others will show. 0 = no limit
counter boolean true Display a counter.
truncate_message int 0 Display only one x characters of the notification/notif. callback will always have the full message
header_output string "{icon} {type} {count}" Template for the notif headers
array [] Array of objects to define the default notifications. callback is optional, text can be a string or an object like the example. 
$('body').notificationcenter({
	default_notifs: [{
		type: 'gift', // define the type
		values: [{
			text: {
				text: 'This is an example',
				title: 'This is a title'
			},
			time: date.getTime()/1000,
			new: true,
			callback: function(notif) {
				$.notificationcenter.alert(notif.text, notif.type);
			}
		}]
	}, {
		[...]
	}]
});
object false Object to define the faye connection. 
$('body').notificationcenter({
	faye: {
		server: 'http://yourserver:port'
		chanel: 'your chanel'
	}
});
object false jQuery ajax Object to define the ajax call. 
$('body').notificationcenter({
	ajax: {
		type: 'POST',
		url: 'some.php',
		data: {
			authkey: 'guess',
			user: 'john'
		}
	}
});
A JSON array is expected as a result of the query, each item can be as an array or an object. 
[
	[
		"This is an alert",
		"system"
	 ],
	 [ ... ]
]
[
	{
		"text": "This is an alert",
		"type": "system"
	},
	{
		[ ... ]
	}
]
ajax_checkTime int 5000 Time between ajax calls in milliseconds.
alert_hidden boolean true If you want to be alerted even if the page has not the focus.
alert_hidden_sound string '' Url of the audio file without the extension You must provide the file in both format MP3/OGG
function false Function to call to store the panel's contents, false = no storage. An object that holds the current panel info will be passed in as an arg. Check your console. 
$('body').notificationcenter({
	store_callback: function(notifs) {
		$.ajax({
			type: 'POST',
			url: 'some.php',
			data: {
				uid: 100,
				notifications: notifs
			}
		}).done(function(data) {
			console.log('storage updated')
		});
	}
});
overlay boolean true Add overlay to prevent interaction with main page while the notification panel is open
overlay_z_index int 1001 Z-index added to the overlay. This value is also used to keep elements on top of the overlay.
center_time_attr string "data-livestamp" Attribute where the current time is added.
object see description Change the language used by notificiationcenter.
By default, this option is set to 
{
  no_notifications : 'No New Notifications',
  delete           : 'Delete', // mobile Delete button
  close            : 'Close',  // Close notification button
}
  • no_notifications sets the text shown when the notification panel does not contain any notifications.
  • delete sets the text of the mobile delete notification button
  • close

Methods back to top

$.notificationcenter.slide();

$.notificationcenter.newAlert('This is a new alert.', 'gift', true, function(notif) { $.notificationcenter.alert(notif.text, notif.type); }, 1406857387, true);

var faye = {
	server: 'http://yourserver:port',
	channel: 'your channel'
};

$.notificationcenter.faye(faye);

var ajax_options = {
	type: 'POST',
	url: 'some.php',
	data: {
		userid: 99
	}
};

$.notificationcenter.ajax(ajax_options, 5000);

This is very useful for callbacks, you could setup a callback type even. action defaults to banner, anything else gives you a action button on your callback and sets the notificaiton to sticky aka no timeout. 
$.notificationcenter.alert('This is just an alert, nothing in notificaiton center', 'system', function(notif) { $.notificationcenter.alert(notif.text, notif.type); });

Set a page title. title is optional, it'll use the current title otherwise 
$.notificationcenter.captureTitle('This is the new page title');
Use the current page title. It will attempt to detect and remove any current notification counts 
$.notificationcenter.captureTitle();